<template>
  <view v-if="show" class="stamina-modal" :class="{ 'modal-enter': isEnter }">
    <view class="stamina-mask" @click="onClose"></view>
    <view class="stamina-popup">
      <view class="stamina-title">体力不足</view>
      <view class="stamina-message">您的体力不足10点，无法开始游戏</view>
      <button class="recover-btn" @click="onRecover">立即恢复</button>
      <button class="cancel-btn" @click="onClose">取消</button>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

// 接收外部传入的控制参数
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['close', 'recover'])

// 内部状态管理
const show = ref(false)
const isEnter = ref(false)

// 监听visible变化控制弹窗显示
watch(() => props.visible, (newVal) => {
  if (newVal) {
    show.value = true
    // 延迟触发动画
    setTimeout(() => {
      isEnter.value = true
    }, 10)
  } else {
    isEnter.value = false
    // 动画结束后隐藏
    setTimeout(() => {
      show.value = false
    }, 300)
  }
})

// 关闭弹窗
const onClose = () => {
  emit('close')
}

// 恢复体力
const onRecover = () => {
  emit('recover')
}
</script>

<style scoped>
/* 体力不足弹窗样式 */
.stamina-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stamina-modal.modal-enter {
  opacity: 1;
}

.stamina-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1101;
}

.stamina-popup {
  position: relative;
  z-index: 1102;
  width: 60vw;
  background-color: white;
  border-radius: 15rpx;
  padding: 40rpx;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stamina-modal.modal-enter .stamina-popup {
  transform: scale(1);
}

.stamina-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.stamina-message {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 30rpx;
  text-align: center;
}

.recover-btn {
  width: 100%;
  padding: 20rpx 0;
  background: linear-gradient(135deg, #10B981, #34D399);
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  transition: all 0.2s ease;
}

.recover-btn:active {
  background: linear-gradient(135deg, #059669, #10B981);
  transform: translateY(2rpx);
}

.cancel-btn {
  width: 100%;
  padding: 20rpx 0;
  background: #f1f1f1;
  color: #666;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  transition: all 0.2s ease;
}

.cancel-btn:active {
  background: #e0e0e0;
  transform: translateY(2rpx);
}
</style>